<template>
  <div class="page-shop-detail">
    <h4 class="zl-title f-mt0">应用基本信息</h4>
    <div class="panel panel-shop-info" v-if="appForm.appName">
      <Form :label-width="80" label-position="left">
        <FormItem :label="app.name" v-for="app in appInfo" :key="app.key">{{app.value}}</FormItem>
      </Form>
    </div>
    <div class="zl-no-data panel" v-else>暂无数据</div>

    <h4 class="zl-title">应用详情</h4>
    <div class="panel panel-shop-detail" v-if="appForm.appName">
      <Form :model="appForm" :label-width="80" label-position="left">
        <FormItem label="应用名称">
          <Input v-model.trim="appForm.appName" placeholder="请输入应用名称" @on-blur="$limitLen"></Input>
        </FormItem>
        <FormItem label="服务版本">
          <Select v-model.trim="appForm.version" @on-change="switchVersion">
            <Option :value="version" :key="version" v-for="version in versions">{{version}}</Option>
          </Select>
        </FormItem>
        <FormItem label="应用描述">
          <Input type="textarea" v-model="appForm.description" placeholder="请输入描述" @on-blur="$limitLen($event, 1000)"></Input>
        </FormItem>
        <FormItem :label="conf.label" v-for="conf in globalConfig" :key="conf.label">
          <Input v-model="conf.defaultValue" :placeholder="conf.description"></Input>
        </FormItem>
        <FormItem label="内置服务">
          <Card v-for="(config, key) in configList" :key="key">
            <h4 class="config-title">{{key}}</h4>
            <div class="config-item" v-for="item in config" :key="item.label">
              <span>{{item.label}}</span>
              <Input v-model.trim="item.defaultValue"></Input>
              <p>{{item.description}}</p>
            </div>
          </Card>
        </FormItem>
      </Form>
    </div>
    <div class="zl-no-data panel" v-else>暂无数据</div>

    <div class="shop-mani">
      <Button type="primary" :loading="deploying" size="large" class="button-deploy" @click="appDeploy" v-if="hasPermission($store, $route.params.environmentId, 'APPTEMPLATE_POST_ENV')">部署</Button>
    </div>

  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    return {
      app: {},
      appInfo: [{
        key: 'name',
        name: '名称：',
        value: ''
      }, {
        key: 'catagory',
        name: '分类：',
        value: ''
      }, {
        key: 'support',
        name: '支持：',
        value: ''
      }, {
        key: 'info',
        name: '描述：',
        value: ''
      }, {
        key: 'usage',
        name: '使用说明：',
        value: ''
      }, {
        key: 'modifyTime',
        name: '修改时间：',
        value: ''
      }],
      versions: [],
      appForm: {
        environmentId: '',
        version: '',
        appName: '',
        description: '',
        appTemplateDetailId: '',
        configOption: {}
      },
      configList: {},
      deploying: false,
      globalConfig: []
    }
  },
  mounted() {
    let vm = this
    vm.$nextTick(function () {
      this.appForm.environmentId = this.$route.params.environmentId
      this.init()
    })
  },
  methods: {
    // app部署
    appDeploy() {
      if (this.app.usage && this.app.usage !== '无使用描述') {
        this.$Modal.confirm({
          title: '系统提示',
          width: 500,
          render: (h, params) => {
            let r = this.app.usage.split('\n')
            let ret = r.map((s) => {
              return (
                <p>{s}</p>
              )
            })
            return h('div', {
              style: {
                'text-align': 'left',
                'font-size': '13px'
              }
            }, ret)
          },
          loading: true,
          onOk: () => {
            this.appDeployDone()
          }
        })
      } else {
        this.appDeployDone()
      }
    },
    appDeployDone() {
      let configOption = {}
      // 内置服务配置信息
      for (const key in this.configList) {
        if (this.configList.hasOwnProperty(key)) {
          const optionArr = this.configList[key]
          for (let i = 0; i < optionArr.length; i++) {
            const option = optionArr[i]
            configOption[option.variable] = option.defaultValue
          }
        }
      }
      // 全局配置信息
      for (let i = 0; i < this.globalConfig.length; i++) {
        const conf = this.globalConfig[i]
        configOption[conf.variable] = conf.defaultValue
      }
      this.appForm.configOption = configOption
      this.deploying = true
      Fetch.post({
        url: '/api/environments/' + this.$route.params.environmentId + '/appstore/apptemplates/deployment',
        params: this.appForm,
        done: () => {
          this.deploying = false
          !!this.app.usage && this.$Modal.remove()
        }
      }).then((res) => {
        this.$Message.success({
          content: '部署服务成功！',
          duration: this.DURATION
        })
        this.$router.push('/home/environment/' + this.$route.params.environmentId + '/info')
      })
    },
    // 获取初始数据
    init() {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/appstore/apptemplates/' + this.$route.params.shopId
      }).then((res) => {
        this.app = res.data
        // 应用基本信息
        for (let i = 0; i < this.appInfo.length; i++) {
          const app = this.appInfo[i]
          app['value'] = res.data[app['key']] || ''
        }
        if (res.data.appTemplateDetails) {
          this.getVersionConfig(res.data.appTemplateDetails)
        }
      })
    },
    // 切换版本
    switchVersion(version) {
      this.getVersionConfig(this.app.appTemplateDetails, true)
    },
    // 获取应用版本对应的配置信息
    getVersionConfig(versionDetail, hasVersion) {
      for (let i = 0; i < versionDetail.length; i++) {
        const template = versionDetail[i]
        // 版本不存在，默认第一个
        if (!this.appForm.version && i === 0) {
          this.appForm.version = template.version
        }
        // 获取对应版本配置选项信息
        if (this.appForm.version === template.version && template.configOptionVos) {
          this.appForm.appTemplateDetailId = template.id
          let configTemp = {}
          let globalConfigTemp = []
          // 获取包含的配置项
          for (let j = 0; j < template.configOptionVos.length; j++) {
            const config = template.configOptionVos[j]
            if (config.label.split('.').length > 1 && !configTemp[config.label.split('.')[0]]) {
              configTemp[config.label.split('.')[0]] = []
            }
          }
          for (let j = 0; j < template.configOptionVos.length; j++) {
            const config = template.configOptionVos[j]
            if (config.label.split('.').length === 1) {
              if (config.label === '应用名') {
                this.appForm.appName = config.defaultValue
              } else if (config.label === '应用描述') {
                this.appForm.description = config.defaultValue
              } else {
                globalConfigTemp.push(Object.assign({}, config))
              }
            } else if (config.label.split('.').length > 1) {
              configTemp[config.label.split('.')[0]].push(Object.assign({}, config, {label: config.label.split('.')[1]}))
            }
          }
          this.globalConfig = globalConfigTemp
          this.configList = configTemp
        }
        if (!hasVersion) {
          this.versions.push(template.version)
        }
      }
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.panel {
  padding: 20px 30px;
}
.panel-shop-info /deep/ {
  .ivu-form-item-label,
  .ivu-form-item-content {
    font-size: 14px;
    white-space: pre-line;
  }
  .ivu-form-item {
    margin-bottom: 6px;
  }
}
.panel-shop-detail /deep/ {
  .ivu-form-item {
    margin-bottom: 20px;
  }
}
.panel-shop-detail {
  margin-bottom: 80px;
}
.panel-shop-detail /deep/ {
  .ivu-form-item-label,
  .ivu-form-item-content {
    font-size: 14px;
  }
  .ivu-card-body {
    padding: 0;
  }
  .ivu-card {
    margin-bottom: 15px;
  }
}
.config-title {
  padding: 6px 10px;
  background-color: #f5f5f5;
}
.config-item {
  padding: 8px 20px;
  p {
    font-size: 12px;
    color: #999;
    line-height: 20px;
    white-space: pre-line;
  }
}
.shop-mani {
  position: fixed;
  bottom: 0;
  left: 240px;
  right: 0;
  background-color: #f5f5f5;
  border-top: 1px solid #eee;
  padding: 10px 0;
  text-align: center;
  .button-deploy {
    width: 110px;
  }
}
</style>
